/<template>
  <div :class="['container', direction === 'vertical' ? 'ver' : '']">
    <div class="container-hd">
      <slot name="header"></slot>
    </div>
    <div class="container-con">
      <slot></slot>
    </div>
    <div class="container-ft">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: `Container`,
  props: {
    // horizontal / vertical
    direction: {
      type: String,
      required: true,
      default: "horizontal",
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.ver {
  flex-direction: column;
}
.container-con {
  flex: 1;
  /* background: red; */
  overflow-y: auto;
}

.container-hd,
.container-ft {
  flex-shrink: 0;
}
</style>